import initDefaultData from '@/constants/initDefaultData'

export default {
  props: {
    id: {
      type: [String, Number],
      default: 'numberModule'
    },

    // 使用场所
    place: {
      type: String
    },

    type: {
      type: String
    },

    title: {
      type: String
    },

    subtitle: {
      type: String
    },

    describe: {
      type: String
    },

    // 图表渲染数据
    data: {
      type: Object,
      default: null
    },

    // 数据源配置
    apiConfig: {
      type: Object
    },

    // 图表配置
    config: {
      type: Object
    }
  },
  data () {
    return {
      loading: false,
      
      // 图表内容
      chart: {
        config: {},
        apiConfig: null
      },

      // 组件显示数据
      showData: {
        title: '',
        describe: ''
      },

      chartObj: null
    }
  },
  created () {
    this.init()
  },

  mounted () {
    setTimeout(()=>{
      this.$render && this.$render()
    }, 10)
  },

  methods: {

    init () {
      this.showData = this.data || initDefaultData(this.type)
    },

    /**
     * 数据更新，渲染图表
     */

     $changeData () {
      this.chartObj && this.chartObj.changeData(this.showData.list)
    },

    /**
     * 更新图表配置
     */
    $updateConfig (config) {
      this.chartObj && this.chartObj.update(config || this.chart.config)
    },

    /**
     * 容器改变大小
     */
    $changeSize () {
      this.chartObj && this.chartObj.changeSize()
    },

    /**
     * 销毁图表
     */
    $destroy () {
      this.chartObj && this.chartObj.destroy()
    }
  },

  beforeUnmount() {
    this.$destroy()
  }
}